<template>
	<el-container>
		<el-main class="nopadding" style="padding: 10px;">
				<FullCalendar
					class="fullCalendar"
					:options="calendarOptions"
					ref="fullCalendar"/>
		</el-main>
	<el-aside v-if="subordinateCalendarList!=undefined">
		<el-container>
			<el-main class="nopadding">
				<el-header style="text-align: center;display: block;"><h2>下属日程</h2></el-header>
				<el-empty v-if="subordinateCalendarList.length==0" description="暂无下属" :image-size="100"></el-empty>
						<ul class="msg-list">
							<li v-for="item in subordinateCalendarList" v-bind:key="item.accountId" style="cursor: pointer;padding: 10px">
								<a target="_blank">
									<div class="msg-list__icon">
										<el-badge type="danger">
											<el-avatar :size="40" :src="item.avatar"></el-avatar>
										</el-badge>
									</div>
									<div class="msg-list__main">
										<h2>{{ item.userName }}</h2>
										<p>{{ item.deptName }}</p>
									</div>
									<div class="msg-list__time">
										<p>{{ item.start }}</p>
										<p>{{ item.end }}</p>
									</div>
								</a>
								<div>{{item.title}}</div>
							</li>
						</ul>
					</el-main>
		</el-container>
	</el-aside>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
	<customerDetails v-if="dialog.customerDetails" ref="customerDialog" @closed="dialog.customerDetails=false"></customerDetails>
</template>
<script>
import saveDialog from './save'
import FullCalendar from '@fullcalendar/vue3' // 核心库
import InteractionPlugin from '@fullcalendar/interaction' // 交互库
import MomentPlugin from '@fullcalendar/moment' // 格式化时间库。可以在插件使用YYYY MM
import DaygridPlugin from '@fullcalendar/daygrid' // 月视图
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from '@fullcalendar/list'
import customerDetails from './customerDetails'
import moment from "moment";

export default {
	components: {
		FullCalendar,
		saveDialog,
		customerDetails
	},
	data() {
		return {
			moduleList:{},
			dialog: {
				save: false,
				customerDetails:false,
			},
			beginTime:"",
			endTime:"",
			subordinateCalendarList:[],
			calendarOptions: {
				locale: "zh",
				selectable: true,
				// 引入插件, 如果有多个视图最好都先添加进去。
				plugins: [
					InteractionPlugin,
					MomentPlugin,
					DaygridPlugin,
					timeGridPlugin,
					listPlugin
				],
				customButtons: {
					todayFn: {
						text: '今天',
						click: this.todayFn
					},
					prevFn: {
						text: '<',
						click: this.prevFn
					},
					nextFn: {
						text: '>',
						click: this.nextFn
					},
					dayGridMonthFn: {
						text: '月视图',
						click: this.dayGridMonthFn
					},
					timeGridWeekFn: {
						text: '周视图',
						click: this.timeGridWeekFn
					},
					timeGridDayFn: {
						text: '日视图',
						click: this.timeGridDayFn
					},
					listDayFn: {
						text: '列表',
						click: this.listDayFn
					},
					getMyCalendarListFn: {
						text: '统计',
						click: this.getMyCalendarListFn
					}
				},
				allDayText: "全天",
				//events:this.getMyCalendarList,
				eventSources:this.getMyCalendarList,
				height: document.documentElement.clientHeight - 130,
				// 默认视图：月视图
				//initialView: 'dayGridMonth',
				initialView: 'dayGridMonth',
				headerToolbar: {
					left: 'todayFn',
					center: 'prevFn,title,nextFn',
					right: 'dayGridMonthFn,timeGridWeekFn,timeGridDayFn,listDayFn,getMyCalendarListFn'
				},
				// 是否显示周六、周日
				weekends: true,
				dateClick: this.handleDateClick,
				select: this.handleSelect,
				eventClick: this.handleEventClick,
				selectAllow: this.selectRange,
				//eventMouseEnter:this.mouseOpt
			}
		}
	},
	mounted() {
		const that = this
		window.onresize = () => {
			return (() => {
				if (document.documentElement.clientHeight - 88 > 500) {
					that.calendarOptions.height = document.documentElement.clientHeight - 88;
				}
			})()
		}
	},
	methods: {
		getMyCalendarListFn()
		{
			this.$nextTick(() => {
				this.$router.replace({
					path: '/calendar/total'
				})
			})
		},
		selectRange(info) {
			return info.start >= this.getDateWithoutTime(new Date())
		},
		getDateWithoutTime(dt) {
			dt.setHours(0, 0, 0, 0);
			return dt;
		},
		todayFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.today();
		},
		prevFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.prev()
		},
		nextFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.next()
		},
		dayGridMonthFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.changeView("dayGridMonth")
		},
		timeGridWeekFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.changeView("timeGridWeek")
		},
		timeGridDayFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.changeView("timeGridDay")
		},
		listDayFn() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.changeView("listDay")
		},
		handleSaveSuccess() {
			const calendarApi = this.$refs.fullCalendar.getApi()
			calendarApi.refetchEvents();
		},

		handleEventClick(item) {
			if(this.moduleList[item.event.id]!=null)
			{
				let recordId=this.moduleList[item.event.id].recordId;
				let module = this.moduleList[item.event.id].module;
				if(module=='CRM-CUSTOMER')
				{
					this.dialog.customerDetails = true
					this.$nextTick(() => {
						this.$refs.customerDialog.open().getCrmCustomerById(recordId);
					})
				}
			}else
			{
				var startStr = item.event.startStr;
				if(startStr.length<=10)
				{
					startStr = startStr+" 00:00:00";
				}
				var endStr = item.event.endStr;
				if(endStr!=undefined&&endStr.length<=10)
				{
					endStr = endStr+" 23:59:59";
				}
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open("edit").setData({calendarId: item.event.id});
				})
			}
		},
		handleDateClick(arg) {
			if (this.compareDate(moment(arg.dateStr).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD'))) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open().setData({start: arg.dateStr + " 00:00:00", end: arg.dateStr + " 23:59:59"});
				})
			}
		},
		handleSelect(arg) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open().setData({start: arg.startStr + " 00:00:00", end: arg.endStr + " 23:59:59"});
			})
		},
		compareDate(d1, d2) { //判断两个日期的大小
			let reg = new RegExp('-', 'g')
			if (((new Date(d1.replace(reg, '/'))) >= (new Date(d2.replace(reg, '/'))))) {
				return true;
			} else {
				return false;
			}
		},
		async getMyCalendarList(item)
		{
			var ress = await this.$API.calendar.getMySubordinateCalendarList.get({beginTime:moment(item.startStr).format('YYYY-MM-DD HH:mm:ss'),endTime:moment(item.endStr).format('YYYY-MM-DD HH:mm:ss')})
			if (ress.code == 200) {
				this.subordinateCalendarList = ress.data
			}
			var res = await this.$API.calendar.getMyCalendarList.get({beginTime:moment(item.startStr).format('YYYY-MM-DD HH:mm:ss'),endTime:moment(item.endStr).format('YYYY-MM-DD HH:mm:ss')})
			if (res.code == 200) {
				let cRes = res.data;
				for(let i=0;i<cRes.length;i++)
				{
					if(cRes[i].module!=undefined && cRes[i].module!='')
					{
						this.moduleList[cRes[i].id]=cRes[i];
					}
				}
				return res.data;
			}else {
				return [];
			}
		},
	}
}
</script>
<style>
.fc-toolbar-chunk > div {
	display: -webkit-inline-flex;
}

.msg-list li {
	border-top: 1px solid #eee;
}

.msg-list li a {
	display: flex;
	padding: 10px;
}

.msg-list li a:hover {
	background: #ecf5ff;
}

.msg-list__icon {
	width: 40px;
	margin-right: 15px;
}

.msg-list__main {
	flex: 1;
}

.msg-list__main h2 {
	font-size: 15px;
	font-weight: normal;
	color: #333;
}

.msg-list__main p {
	font-size: 12px;
	color: #999;
	line-height: 1.8;
	margin-top: 5px;
}

.msg-list__time {
	text-align: right;
	color: #999;
}
</style>
